<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jsTree v.1.0 - Demo</title>
        <script type="text/javascript" src="./js/jquery.js"></script>
        <script type="text/javascript" src="./js/jquery.jstree.js"></script>
        <link type="text/css" rel="stylesheet" href="./css/jstree.css"/>
    </head>
    <body id="demo_body">
        <div id="container">
            <h1 id="dhead">jsTree v.1.0</h1>
            <h1>DEMO</h1>
            <h2>Creating a tree, binding events, using the instance</h2>
            <div id="description">
                <p>Here is how you create an instance, bind an event and then get the instance.</p>
                <div id="demo1" class="demo" style="height:100px;"/>
                <script type="text/javascript" >
                    $(function () {
                        // TO CREATE AN INSTANCE
                        // select the tree container using jQuery
                        $.jstree._themes = "./content/css/";
                        $("#demo1")
                        // call `.jstree` with the options object
                        .jstree({
                            // the `plugins` array allows you to configure the active plugins on this instance
                            "plugins" : ["themes","ui","checkbox","json_data","contextmenu"],
                            // it makes sense to configure a plugin only if overriding the defaults
                            // each plugin you have included can have its own config object
                            "core" : { "initially_open" : [ "concept12" ] },
                            "json_data" : {
                                "data" : [
                                    {
                                        "data" : "concept1-term",
                                        "attr" : { "id" : "concept1-id" },
                                        "children" : [ {
                                                "data" : "concept11-term",
                                                "attr" : { "id" : "concept11-id" },
                                                "children" : []
                                            }, {
                                                "data" : "concept12-term",
                                                "attr" : { "id" : "concept12-id" },
                                                "children" : []
                                            }]
                                    },
                                    {
                                        "data" : "concept2-term",
                                        "attr" : { "id" : "concept2-id" },
                                        "children" : []
                                    }
                                ]
                            },
                            "contextmenu" : {
                                "items" : { // Could be a function that should return an object like this one
                                    "add" : {
                                        "separator_before"	: false,
                                        "separator_after"	: true,
                                        "label"	        : "Add to query",
                                        "action"	        : function (obj) { this.create(obj); }
                                    },
                                    "remove" : {
                                        "separator_before"	: false,
                                        "separator_after"	: true,
                                        "label"	        : "Remove from query",
                                        "action"	        : function (obj) { this.create(obj); }
                                    }
                                }
                            }

                        })
                        // EVENTS
                        // each instance triggers its own events - to process those listen on the container
                        // all events are in the `.jstree` namespace
                        // so listen for `function_name`.`jstree` - you can function names from the docs
                        .bind("loaded.jstree", function (event, data) {
                            //                            alert("loaded");
                            // you get two params - event & data - check the core docs for a detailed description
                        });
                        //                        $("#demo1").jstree("set_focus"); 
                        // with the methods below you can call even private functions (prefixed with `_`)
                        // 2) you can get the focused instance using `$.jstree._focused()`. 
                        //setTimeout(function () { $.jstree._focused().select_node("#phtml_1"); }, 1000);
                        // 3) you can use $.jstree._reference - just pass the container, a node inside it, or a selector
                        //setTimeout(function () { $.jstree._reference("#phtml_1").close_node("#phtml_1"); }, 1500);
                        // 4) when you are working with an event you can use a shortcut
                        $("#demo1").bind("select_node.jstree", function (e, data) {
                            // data.inst is the instance which triggered this event
                            //data.inst.select_node("#phtml_2", true);
                            alert(data.rslt.obj.attr("id")); 
                        });
                        // setTimeout(function () { $.jstree._reference("#phtml_1").open_node("#phtml_1"); }, 2500);
                    });
                </script>
            </div>
        </div>
    </body>
</html>
